<template>
  <div>
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="index">
        <img
          slot="icon"
          v-show="selected == 'index'"
          src="../assets/tabbar/index_1.png"
        />
        <img
          slot="icon"
          v-show="selected != 'index'"
          src="../assets/tabbar/index_0.png"
        />
        首页
      </mt-tab-item>
      <mt-tab-item id="classify">
        <img
          slot="icon"
          v-show="selected == 'classify'"
          src="../assets/tabbar/classify_1.png"
        />
        <img
          slot="icon"
          v-show="selected != 'classify'"
          src="../assets/tabbar/classify_0.png"
        />
        分类
      </mt-tab-item>
      <mt-tab-item id="collect">
        <img
          slot="icon"
          v-show="selected == 'collect'"
          src="../assets/tabbar/collect_1.png"
        />
        <img
          slot="icon"
          v-show="selected != 'collect'"
          src="../assets/tabbar/collect_0.png"
        />
        收藏
      </mt-tab-item>
      <mt-tab-item id="my">
        <img
          slot="icon"
          v-show="selected == 'my'"
          src="../assets/tabbar/my_1.png"
        />
        <img
          slot="icon"
          v-show="selected != 'my'"
          src="../assets/tabbar/my_0.png"
        />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import { watch } from "vue";
export default {
  data() {
    return {
      selected: "index",
    };
  },
  watch: {
    selected(to, from) {
      this.$router.push(`/home/${to}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.mint-tabbar {
  margin-bottom: 8px;
  background: none;
}
.mint-tabbar > .mint-tab-item.is-selected {
  color: orangered;
  background: none;
}
</style>
